<template>
  <div>
    <div class="card" style="margin-bottom:20px;line-height: 30px;background: linear-gradient(to bottom, #bccef8, #f3f2ee);">
      <div>欢迎您！{{ displayIndexName }}，祝您今天过得开心！</div>
    </div>

    <div style="display: flex">
      <!-- 系统公告 -->
      <div class="card" style="height:650px;width: 50%;background: linear-gradient(to bottom, #e8f5e9, #c8e6c9); border: 1px solid;margin-right: 10px">
        <div class="card-title">系统公告</div>
        <div class="scrollable-content">
          <el-timeline>
            <el-timeline-item
                v-for="(item, index) in data.noticeData"
                :key="index"
                icon="el-icon-more"
                type="primary"
                color="#14e626"
                size="large"
                :timestamp="item.createTime">
              <div style="font-weight: bold">{{ item.title }}</div>
              <div style="font-size: 14px;">{{ item.content }}</div>
            </el-timeline-item>
            <el-timeline-item
                v-if="data.noticeData.length === 0"
                icon="el-icon-info"
                type="primary"
                color="#909399"
                size="large"
                style="background: #f8f8f8; border-radius: 20px;padding: 5px 0px 0px 10px"
            >
              <div style="color: #909399;font-weight: bold;font-size: 14px">当前系统暂无公告或通知</div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <!-- 消息通知 - 调整后与公告风格一致 -->
      <div class="card" style="margin-right: 10px; width: 50%;background: linear-gradient(to bottom, #f8e8f6, #f3cde3); border: 1px solid;">
        <div class="card-title">消息通知</div>
        <div class="scrollable-content">
          <el-timeline>
            <el-timeline-item
                v-for="(item, index) in data.messageData"
                :key="index"
                icon="el-icon-more"
                type="primary"
                color="#862424"
                size="large"
                :timestamp="item.createTime">
            <div style="font-weight: bold">{{item.type}}</div>
            <div style="font-size: 14px; margin-top: 5px;">{{ item.message }}</div>
            </el-timeline-item>
            <el-timeline-item
                v-if="data.messageData.length === 0"
                icon="el-icon-info"
                type="primary"
                color="#909399"
                size="large"
                style="background: #f8f8f8; border-radius: 20px;padding: 5px 0px 0px 10px"
            >
              <div style="color: #909399;font-weight: bold;font-size: 14px">当前暂无消息通知</div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <!-- 日历 -->
      <div class="card" style="width: 50%;background: linear-gradient(to bottom, #faf7c0, #f5f8f3);border: 1px solid;margin-right: 10px">
        <div class="card-title">日历日期</div>
        <el-calendar v-model="data.value">
        </el-calendar>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, reactive} from "vue";
import {ElMessage} from "element-plus";
import alovaInstance from "@/utils/request.js";

const data = reactive({
  user: JSON.parse(localStorage.getItem('credit-system-user') || '{}'),
  noticeData:[],
  messageData: [],
  value: new Date()
})

const displayIndexName = computed(() => {
  if (data.user.nickname) return data.user.nickname
  if (data.user.realname) return data.user.realname
  if (data.user.username) return data.user.username
  return '默认用户名'
})

const nowRoleId = computed(() => {
  if (data.user.sysId) return data.user.sysId
  if (data.user.adminId) return data.user.adminId
  if (data.user.teaId) return data.user.teaId
  if (data.user.stuId) return data.user.stuId
  return null
})

/*加载公告信息*/
const loadNotice = () => {
  alovaInstance.Get('/collegeAdminNotice/selectNoticeList').then(res => {
    if (res.code === '200') {
      data.noticeData = res.data
    }
  }).catch(error => {
    console.error('请求失败:', error);
    ElMessage.error(error.message);
  });
}

/*加载属于不同角色的消息通知*/
const loaMessageNotice = () => {
  alovaInstance.Get('/messageWithRole/getMessageByRoleId', {
    params: {
      roleId: nowRoleId.value,
      role: data.user.role
    }
  }).then(res => {
    if (res.code === '200') {
      data.messageData = res.data
    }
  }).catch(error => {
    console.error('请求失败:', error);
    ElMessage.error(error.message);
  });
}

// 加载数据
loadNotice()
loaMessageNotice()  // 新增消息加载调用
</script>

<style scoped>
.card-title {
  font-size: 22px;
  font-weight: bold;
  padding: 0 0 12px 5px;
  margin: 0;
}

.scrollable-content {
  max-height: 550px;
  overflow-y: auto;
  padding: 10px 10px 10px 0px;
}
</style>